<template>
	<view class="bgf">
		<custom-nav :title="'业务运营'"></custom-nav>
		<view class="container">
			<view class="card-content df ac" @tap="openSeeMore">
				<avatar
					:avatarIcon="'https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130571/ORG/1a64ne1pp7jin5pjmnbuu1j2b.jpg'"
					:name="
						loginUser.name.length > 2
							? loginUser.name.substr(
									loginUser.name.length - 2,
									2
							  )
							: loginUser.name
					"
					:width="100"
					:fontsize="30"
				></avatar>
				<view class="flex-1 ml30">
					<view class="flex-between">
						<view class="c10 f32">{{ loginUser.name }}</view>
						<uni-icons
							type="right"
							size="18"
							color="#999999"
						></uni-icons>
					</view>
					<view class="df c6 mt10 uni-ellipsis-2">
						<text class="c6" style="min-width: 140rpx"
							>业务范围：</text
						>
						<text>
							<text
								v-for="item in userWorkRange"
								:key="item.hospitalId"
							>
								<text>
									<text>{{ item.hospitalName }}-</text>
									<text>{{
										item.departNames.join(',')
									}}</text>
								</text>
							</text>
						</text>
					</view>
				</view>
			</view>
			<view
				class="card-content df ac mt20"
				:class="
					activeFormList && activeFormList.length > 0 ? '' : 'jsc'
				"
			>
				<view
					class="df flex-wrap mt30"
					style="width: 100%"
					v-if="activeFormList && activeFormList.length > 0"
				>
					<view
						class="df fdc ac w25 mb30"
						v-for="(item, inx) in activeFormList"
						:key="inx"
						@tap="enterItem(item)"
					>
						<view
							class="background-icon"
							:style="'background: ' + item.logo.background"
						>
							<view class="icon-cont">
								<uni-icons
									color="#fff"
									custom-prefix="iconfont"
									:type="`${item.logo.icon.replace(
										'el-',
										''
									)}`"
									size="28"
								></uni-icons>
							</view>
						</view>
						<view class="item-name">{{ item.formName }}</view>
					</view>
				</view>
				<view v-else class="c6 f32"> 请先去电脑端配置 </view>
			</view>
		</view>
		<scopePopup
			@close="closeScopePopup"
			:show="isShowscopePopup"
		></scopePopup>
	</view>
</template>
<script>
import scopePopup from '@/subPackagesIndex/pages/index/businessOperations/components/scopePopup.vue'
import avatar from '@/components/avatar/avatar.vue'
export default {
	components: { avatar, scopePopup },
	data() {
		return {
			isShowscopePopup: false,
			activeFormList: [],
			userWorkRange: [],
		}
	},
	onLoad() {
		this.getModelListByType()
		this.getUserWorkRange()
	},
	methods: {
		getModelListByType() {
			this.$request
				.request('wflow/wflow/model/list/byType', {
					data: {
						typeCode: 'default_merger',
					},
				})
				.then((res) => {
					if (res.status === 200) {
						this.activeFormList = res.data
						this.activeFormList &&
							this.activeFormList.length > 0 &&
							this.activeFormList.forEach((group) => {
								group.logo = JSON.parse(group.logo)
							})
					}
				})
		},
		openSeeMore() {
			this.isShowscopePopup = true
		},
		closeScopePopup() {
			this.isShowscopePopup = false
		},
		enterItem(row) {
			uni.navigateTo({
				url: `/subPackagesIndex/pages/index/approval/index?formId=${row.formId}&defaultType=default_merger&pagePath=approvalCenter`,
			})
		},
		getUserWorkRange() {
			this.$request
				.request('workstand-platform/moduleDetail/getUserWorkRange', {
					data: {},
				})
				.then((rsp) => {
					this.userWorkRange = rsp.data
				})
		},
	},
	computed: {
		loginUser() {
			return uni.getStorageSync('loginUser')
		},
	},
}
</script>
<style lang="scss" scoped>
.container {
	padding: 20rpx;
}
.background-icon {
	width: 100rpx;
	height: 100rpx;
	border-radius: 25rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.icon-cont {
		height: 100rpx;
		line-height: 100rpx;
	}
}
.item-name {
	margin-top: 15rpx;
	font-size: 26rpx;
	color: #666;
	max-width: 80px;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.uni-ellipsis-2 {
	/* #ifndef APP-NVUE */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	/* #endif */
	/* #ifdef APP-NVUE */
	lines: 2;
	text-overflow: ellipsis;
	/* #endif */
}
</style>
